<template>
  <div>
    <amap></amap>

    <el-row :gutter="20">
      <el-col :span="12" :offset="6">
        <div class="grid-content bg-purple" style="text-align:center;color:red;size:7;line-height:30px">
          新品上市推荐
        </div>
      </el-col>
    </el-row>
    <el-carousel :interval="4000" type="card" height="200px">
      <el-carousel-item v-for="item in imgUrl" :key="item.l">
        <el-image  style="width: 100%; height: 100%" :src="item.img" fit="fit"/>
      </el-carousel-item>
    </el-carousel>
   

    <el-row :gutter="20" >
      <el-card class="box-card">
        <span>最新车位</span>
        <div v-for="o in 4" :key="o" @click="bb">
            <el-col :span="6">
              <el-card class="box-card">
                 <el-image
                  style="width: 250px; height: 100px"
                 
                  >
                </el-image>
                 <div v-for="p in supParkings" :key="p.name" class="text item">
                  <font color="#FF0000" size="2">车位名字：</font>{{p.name }} <br/>
                  <font color="#FF0000" size="2">车位名字：</font>{{p.described}}
                  <font color="#FF0000" size="4">点击预约</font>
                </div>
              </el-card>
            </el-col>
        </div>
      </el-card>
    </el-row>
    <div class="line"></div>
    <el-row :gutter="20">
      <el-card class="box-card">
        <span>最热车位</span>
        <div v-for="o in 4" :key="o" @click="bb">
            <el-col :span="6">
              <el-card class="box-card">
                 <el-image
                  style="width: 250px; height: 100px"
                 
                  >
                </el-image>
                 <div v-for="p in supParkings" :key="p.e" class="text item">
                  <font color="#FF0000" size="2">车位名字：</font>{{p.name }} <br/>
                  <font color="#FF0000" size="2">车位名字：</font>{{p.described}}
                  <font color="#FF0000" size="4">点击预约</font>
                </div>
              </el-card>
            </el-col>
        </div>
      </el-card>
    </el-row>
    <el-row :gutter="20">
      <el-card class="box-card">
        <span>即将出租</span>
        <div v-for="o in 4" :key="o"  @click="bb">
            <el-col :span="6">
              <el-card class="box-card">
                 <el-image
                  style="width: 250px; height: 100px"
                  >
                </el-image>
                <div v-for="p in supParkings" :key="p.q" class="text item">
                  <font color="#FF0000" size="2">车位名字：</font>{{p.name }} <br/>
                  <font color="#FF0000" size="2">车位名字：</font>{{p.described}}
                  <font color="#FF0000" size="4">点击预约</font>
                </div>
              </el-card>
            </el-col>
        </div>
      </el-card>
    </el-row>
    <el-row :gutter="20">
      <el-card class="box-card">
        <span>相关新闻</span>
        <div v-for="o in 4" :key="o" >
            <el-col :span="6">
              <el-card class="box-card">
               <div v-for="p in supParkings" :key="p.w" class="text item">
                  <font color="#FF0000" size="2">文章1：</font>{{p.name }} <br/>
                  <font color="#FF0000" size="2">标题1：</font>{{p.described}}
                  <font color="#FF0000" size="4">查看详细</font>
                </div>
              </el-card>
            </el-col>
        </div>
      </el-card>
    </el-row>
  </div>
</template>

<script>
import amap from "./p_map.vue"

export default {
    name:"Home",
    components: {
      amap
    },
    data() {
      return{

        activeIndex:"",
        supParkings:[
            {
              name:"博友哎停车库",
              described:"停车送奶茶"
            }
        ],
        imgUrl:[
          {
             img:"https://img1.baidu.com/it/u=1386892812,1233887728&fm=26&fmt=auto&gp=0.jpg"
          },
          {
             img:"https://img1.baidu.com/it/u=2933946195,3228428399&fm=26&fmt=auto&gp=0.jpg"
          },
            {
             img:"https://img0.baidu.com/it/u=2105776536,1647139602&fm=26&fmt=auto&gp=0.jpg"
          },
            {
             img:"https://img2.baidu.com/it/u=2934778646,4158309019&fm=26&fmt=auto&gp=0.jpg"
          },
            {
             img:"https://img0.baidu.com/it/u=3198118042,2825310711&fm=26&fmt=auto&gp=0.jpg"
          },
            {
             img:"https://img2.baidu.com/it/u=1177301296,785838805&fm=26&fmt=auto&gp=0.jpg"
          }
        ],
        url:"https://img1.baidu.com/it/u=4182133720,1102913758&fm=26&fmt=auto&gp=0.jpg",
        fit:"",
      }
    },
    methods: {
      bb(){
        this.$router.push({name:"cardetail"})
      },
      handleSelect(){
        
      },
      z(){
         this.$router.push({name:"carseckill"})
      }
    }
  
};
</script>

<style scoped>
  .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
  }
  
  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }
  
  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
</style>
